<template>
	<view class="footer" @tap.stop :style="{height: height + 'rpx'}">
		<view class="footer-left" v-if="leftVisible">
			<view id='msg-type' class="send-comment" style="background-color: orange;" @tap="collect">加入词条</view>
		</view>
		<view class="footer-center">
			
			<input
			class="input-text"
			@confirm="sendMessge"
			v-model="inputValue"
			:focus="focus"
			@blur="blur"
			:placeholder="placeholder"
			:maxlength="-1"
			:show-confirm-bar="false"
			 :style="{height: (height * 0.6) + 'rpx',lineHeight: ((height * 0.6) / row) + 'rpx'}"
			:cursor-spacing="20"
			:fixed="true"
			:adjust-position="adjustPosition"
			/>
				
			<!-- <input class="input-text" type="text" @confirm="sendMessge" v-model="inputValue" :focus="focus" @blur="blur" :placeholder="placeholder" /> -->
			
		</view>
		<view class="footer-right">
			<view id='msg-type' class="send-comment" @tap="sendMessge">发送</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				inputValue: ''
			}
		},
		props:{
			placeholder: {
				type: String,
				required: true
			},
			focus: {
				type:Boolean,
				required: true
			},
			height: {
				type: Number,
				default: 100
			},
			row: {
				type: Number,
				default: 1
			},
			leftVisible: {
				type: Boolean,
				default: false
			},
			adjustPosition: {
				type: Boolean,
				default: false
			}
		},
		onLoad(){
			
		},
		methods: {
			blur: function() {//失焦触发通知父组件
				var that = this;
				this.$emit('blur')
			},
			startRecognize: function () {
				var options = {};
				var that = this;
				options.engine = 'iFly';
				that.inputValue = "";
				plus.speech.startRecognize(options, function (s) {
					console.log(s);
					that.inputValue += s;
				}, function (e) {
					console.log("语音识别失败：" + e.message);
				});
			},
			sendMessge: function () {
				if (!this.inputValue) {
					uni.showModal({
						content:"还没有输入内容哦!",
						showCancel:false
					})
					return;
				}
				//点击发送按钮时，通知父组件用户输入的内容
				this.$emit('send-message', this.inputValue);
				this.inputValue = '';//清空上次输入的内容
			},
			collect() {
				if (!this.inputValue) {
					uni.showModal({
						content:"还没有输入内容哦!",
						showCancel:false
					})
					return;
				}
				this.$emit('collect-message', this.inputValue);
			},
 			setValue(v) {
				this.inputValue = v;
			}
		}
	}
</script>

<style>
	.footer {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 100upx;
		min-height: 80upx;
		border-top: solid 1px #bbb;
		overflow: hidden;
		padding: 5upx;
		background-color: #F4F5F6;
		align-items: center;
	}
	.footer-left {

		width: 1;
		height: 100%;
		
		margin:  0 5rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.footer-right {
		width: 80upx;
		height: 100%;
		color: #1482D1;
		margin-right: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.footer-center {
		flex: 6;
		padding: 0 12upx; 
		height: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.footer-center .input-text {
		flex: 1;
		background: #fff;
		/* border: solid 1upx #ddd; */
		padding: 10upx !important;
		font-family: verdana !important;
		overflow: hidden;
		border-radius: 15upx;
	}
	.send-comment{
		background-color: #007AFF;
		text-align: center;
		line-height: 60upx;
		color: #FFFFFF;
		width: 100%;
		height: 60upx;
		padding: 5rpx 10rpx;
		border-radius: 5px;
		font-size: 10px;
		/* height: 60upx; */
	}
	uni-textarea {
		width: auto;
	}
	
</style>
